<template>
    <div class="comp-no-data">
        <div class="icon-box">
            <i class="icon-record"></i>
        </div>
        <div class="text-box">
            <slot>{{$t('common.comp.noData')}}</slot>
        </div>
    </div>
</template>

<script type="text/babel">
    import {LANG, LOCAL} from '../util/lang';
    export default {
        data() {
            return {
                LANG,
                LOCAL
            };
        },
        methods: {

        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-no-data {
        padding: 32px 0;
        text-align: center;
        color: #999;
        .icon-box, .text-box {
            display: inline-block;
            vertical-align: middle;
        }
        .icon-box {
            .icon-record {
                font-size: 24px;
            }
        }
        .text-box {
            margin-left: 4px;
            text-align: left;
            >.row {
                &:first-child {
                    font-size: 12px;
                }
                &:nth-child(2) {
                    font-size: 12px;
                }
            }
        }
    }
</style>